import React, { useEffect, useState } from 'react'

class ClickDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  componentDidMount() {
    document.title = `你点击了 ${this.state.count} 次`
  }
  componentDidUpdate() {
    document.title = `你点击了 ${this.state.count} 次`
  }

  render() {
    return (
      <div>
        <p>你点击了 {this.state.count} 次</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>点我</button>
      </div>
    )
  }
}

const ClickDemo2 = () => {
  let [count, setCount] = useState(0)
  let [light, setLight] = useState(false)
  console.log('render')
  useEffect(() => {
    console.log('count', count, 'light', light)
    document.title = `你点击了 ${count} 次`
  }, [])

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点我</button>
      <button onClick={() => setLight(!light)}>{light ? '关' : '开'}</button>
    </div>
  )
}

export default ClickDemo2
